<template>
  <div class="home">
    <header>
      <h4>HC智慧家园</h4>
      <van-dropdown-menu>
        <div class="weizhi">
          <img src="../assets/images/weizhi.png" alt="" style="width: 25px" />
        </div>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <van-search
        shape="round"
        placeholder="请输入搜索关键词"
        background="#4da630"
      />
    </header>
    <div class="con">
      <van-grid>
        <van-grid-item :icon="c" text="物业费" />
        <van-grid-item :icon="d" text="停车费" />
        <van-grid-item :icon="e" text="投诉" />
        <van-grid-item :icon="j" text="家庭成员" />
        <van-grid-item :icon="m" text="团购" :to="{ name: 'Categroy' }" />
        <van-grid-item :icon="n" text="公告" :to="{ name: 'Gong' }" />
        <van-grid-item :icon="o" text="资讯" :to="{ name: 'Zixun' }" />
        <van-grid-item :icon="p" text="论坛" :to="{ name: 'Forum' }" />
      </van-grid>

      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img src="../assets/images/01.png" alt="" style="width: 100%"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/images/02.jpg" alt="" style="width: 100%"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/images/03.jpg" alt="" style="width: 100%"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../assets/images/04.jpg" alt="" style="width: 100%"
        /></van-swipe-item>
      </van-swipe>
      <h3>最新公告</h3>
      <van-card
        v-for="item in gong"
        :key="item.id"
        :desc="item.desc"
        :title="item.name"
        :thumb="item.coverImage | dalImg"
        :thumb-link="'/#/detail?id=' + item.id"
      >
        <template #bottom>
          <van-tag plain type="danger">{{
            $moment(item.createdAt).format("YYYY-MM-DD")
          }}</van-tag>
        </template>
        <template #footer>
          <van-tag plain type="danger">浏览量{{ amount }}</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { loadGong } from "../services/gonggao";
const c = require("../assets/images/wuyefei.png");
const d = require("../assets/images/tingche2.png");
const e = require("../assets/images/icon-test.png");
const j = require("../assets/images/jt.png");
const m = require("../assets/images/tuangoumiaosha.png");
const n = require("../assets/images/gg.png");
const o = require("../assets/images/zixun.png");
const p = require("../assets/images/diqiu.png");
export default {
  name: "Home",
  data() {
    return {
      value1: 0,
      value2: "a",
      c,
      d,
      e,
      j,
      m,
      n,
      o,
      p,
      option1: [
        { text: "二七区", value: 0 },
        { text: "金水区", value: 1 },
        { text: "高新区", value: 2 },
        { text: "中原区", value: 2 },
        { text: "管城区", value: 2 },
      ],
      gong: [],
      amount: 0,
    };
  },
  async created() {
    const gong = await loadGong();
    console.log(gong.data);
    this.gong = gong.data;
    this.amount = Math.floor(Math.random() * 100);
  },
};
</script>
<style scoped>
.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 7rem;
  background: #4da630;
  text-align: center;
  overflow: hidden;
  position: relative;
}
h4 {
  color: white;
  margin-top: 1.8rem;
}
.weizhi {
  position: absolute;
  top: 4.1rem;
  left: 0.8rem;
}

::v-deep .van-search {
  padding: 0;
  width: 55%;
  float: right;
  margin-top: 1rem;
  margin-right: 5px;
  background-color: none;
}

.van-search .van-cell {
  padding: 0;
}
::v-deep .van-dropdown-menu {
  width: 30%;
  float: left;
  margin-top: 1rem;
  overflow: hidden;
  margin-left: 5px;
  border-radius: 10px;
}
::v-deep .van-dropdown-menu__bar {
  height: 24px;
  /* background: rgba(110, 110, 110, 0.5); */
}
::v-deep .van-dropdown-menu__title {
  color: #333;
}
::v-deep .van-swipe {
  margin: 0.8rem 0;
}
.con {
  height: 100%;
  flex: 1;
  overflow-y: auto;
}
h3 {
  margin-left: 1rem;
}
</style>
